记录前端大屏自适应参考

您所在的位置：网站首页 › pc h5 自适应 › 记录前端大屏自适应参考

记录前端大屏自适应参考

2023-06-23 08:09| 来源: 网络整理| 查看: 265

第一种:index.vue

import indexjs from './index.js'

export default {

...indexjs

}

@import './index.scss';

index.js

export default {

components: {

BsHeader: () => import('./components/header.vue'),

LeftView: () => import('./components/leftView/index.vue'),

RightView: () => import('./components/rightView/index.vue'),

BottomView: () => import('./components/bottomView/index.vue'),

CenterView: () => import('./components/centerView/index.vue')

data() {

return {

styleObj: { transform: 'scale(1.0) translate(-50%, -50%)' },

width: 1920,

height: 1080,

data: {}

}

mounted() {},

created() {

this.changeScale()

window.addEventListener('resize', this.changeScale)

this.initData()

methods: {

changeScale() {

const body = document.documentElement

const scale1 = body.clientWidth / this.width

const scale2 = body.clientHeight / this.height

const scale = scale1 < scale2 ? scale1 : scale2

this.styleObj.transform = `scale(${scale}) translate(-50%, -50%)`

// 如果大屏页面是通过一个接口全部返回的，就在这里请求，然后通过给各个部分的组件传参显示数据

initData() {

this.data = { 'a': 1, 'b': 2, 'c': 3, 'd': 4, 'f': 5, 'g': 6, 'h': 7 }

}

watch: {}

}

leftView.vue

数据1

数据2

数据3

数据4

import indexjs from './index.js'

export default {

...indexjs

}

@import './index.scss';

index.css

.bs-container {

width: 100%;

height: 100%;

// background-image: url("~@/assets/images/bg.png");

// background-size: 100% 100%;

background-color: rgba(247, 247, 247, 1);

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

.bigscreen {

width: 1920px;

height: 1080px;

overflow: hidden;

position: fixed;

top: 50%;

left: 50%;

transform-origin: left top;

z-index: 999;

.content-view {

margin: 20px 20px 30px 20px;

height: 968px;

position: relative;

}

第二种:

export default { name: "ScaleBox", props: { width: { type: Number, default: 1920 }, height: { type: Number, default: 1080 } }, data() { return { scale: null }; }, mounted() { this.setScale(); window.addEventListener("resize", this.setScale); }, methods: { getScale() { const { width, height } = this; let ww = window.innerWidth / width; let wh = window.innerHeight / height; return ww < wh ? ww : wh; }, setScale() { this.scale = this.getScale(); this.$refs.ScaleBox.style.setProperty("--scale", this.scale); }, debounce(fn, delay) { let delays = delay || 500; let timer; return function() { let th = this; let args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function() { timer = null; fn.apply(th, args); }, delays); }; } } }; #ScaleBox { --scale: 1; } .wrap { background: #eee; width: 100%; height: 5000px; } .ScaleBox { transform: scale(var(--scale)) translate(-50%, -50%); display: flex; height: 100%; flex-direction: column; transform-origin: 0 0; position: absolute; left: 50%; top: 50%; transition: 0.3s; z-index: 999; }

【本文地址】

记录前端大屏自适应参考

记录前端大屏自适应参考

今日新闻

推荐新闻